﻿@using apiApplication1.Controllers;

<p>@ViewBag.Ip</p>
<div class="liveExample">
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="template:{name:'list',foreach: users}">
        </tbody>
    </table>
</div>
<script type="text/html" id="list">
    <tr>
        <td data-bind="text:id"></td>
        <td>
            <input type="text" data-bind="value:name, click:edit" /></td>
        <td>
            <a data-bind='attr: { href: delUrl, title: title }'>删除</a>
            <a href="#" data-bind="click:$parent.removePerson">移除</a>
            <span data-bind="visible:editing"><a data-bind='click:save'>保存</a></span>
        </td>
    </tr>
</script>
<script type="text/javascript">
    //实体的属性和方法
    var User = function (id, name) {
        self = this;
        self.id = ko.observable(id);
        self.name = ko.observable(name);
        self.delUrl = "/home/delete/" + self.id;
        self.title = self.name;
        self.name.subscribe(function (newvalue) {
            alert("属性有变化，新值为：" + newvalue);
        });
        self.editing = ko.observable(false);
        self.save = function () { alert("保存操作，更新后的对象为：" + this.name()); }
        self.edit = function () {//这里的this是当前调用的对象，而不是UserList，而self才是UserList对象，这也是为什么要使用var self = this语句的原因
            this.editing(true);
        }
    };

    //集合属性和方法
    var UserList = function () {
        var self = this;//这里的this表示UserList对象
        self.users = ko.observableArray();
        for (var i = 0; i < 2; i++) {
            self.users.push(new User(i, "zzl"));
        }

        // Behavior Remove
        self.removePerson = function () {//data-bind="click:$parent.removePerson"//这句为调用当前对象的父对象上的方法
            self.users.remove(this); //这里的this，表示当然调用的对象
        }
        var json =@Html.Raw(Json.Encode(ViewBag.Category));
        self.checkboxList =json;
    };
    ko.applyBindings(new UserList());

</script>

<!-- ko foreach: checkboxList -->
<input type="checkbox" data-bind="value: id, checked:false" />
<span data-bind="text:name"></span>
<!-- /ko  -->
<div id="content" contenteditable="true" class="editDemo" style="width: 400px; height: 100px;"></div>
<textarea class="contentArea" name="content"></textarea>
<br />
<input type="button" value="提交" onclick="submit()" />
<br />
<input type="button" onclick="$('.contentArea').val(JMEditor.html('content'));" value="取值">

<script>
    function submit(){
        $.ajax({
            url    : "/Home/Index",
            type   : "POST",
            data   :{content:JMEditor.html('content')},
            success: function (data) { alert(data); }
   
        });
    }
</script>

<fieldset>
    <legend>测试Web Api
    </legend>
    <input type="text" name="UserName" id="UserName" />
    <input type="text" name="UserEmail" id="UserEmail" />
    <a href="javascript:add()">添加(post)</a><br />
    <a href="javascript:update(1)">更新(put)</a><br />
    <a href="javascript:deletes(1)">删除(delete)</a><br />
    <a href="javascript:get()">列表(Get)</a><br />
    <a href="/api/test/1">实体(Get)</a><br />
</fieldset>
<script>
    //得到列表
    function get(){
        $.ajax({
            url    : "/api/Test/",
            type   : "Get",
            success: function (data) { alert(JSON.stringify(data)); }
        });
    }
    //添加
    function add() {
        $.ajax({
            url    : "/api/Test/",
            type   : "POST",
            data   :{"UserName":$("#UserName").val(),"UserEmail":$("#UserEmail").val()},
            success: function (data) { alert(JSON.stringify(data)); }
        });
    }
    //更新
    function update(id) {
        $.ajax({
            url    : "/api/Test",
            type   : "Post",
            data   :{"UserName":"modiTest","UserEmail":"Parry@cnblogs.com"},
            success: function (data) { alert(JSON.stringify(data)); }
        });

    }
    //删除
    function deletes(id) {
        $.ajax({
            url    : "/api/Test/1",
            type   : "DELETE",
            success: function (data) { alert(data);}
        });

    }
</script>


<link href="~/Scripts/artDialog4.1.7/skins/blue.css" rel="stylesheet" />
<link href="~/Scripts/jquery-plugin-boxy/css/boxy.css" rel="stylesheet" />
<link href="~/Scripts/jquery-plugin-boxy/css/common.css" rel="stylesheet" />
<script src="~/Scripts/artDialog4.1.7/jquery.artDialog.js"></script>
<script src="~/Scripts/jquery-plugin-boxy/js/jquery.boxy.js"></script>
<script src="~/Scripts/jquery-plugin-boxy/boxyFun.js"></script>
<script>
    Boxy.alert("文件未找到",null,  {title: '在线辅导提示您',closeText: 'x'});

    //art.dialog({
    //    id: 'demoSkin',
    //    padding: '15px',
    //    title: 'artDialog皮肤展示',
    //    content: "artDialog皮肤展示"
    //});
   
    //art.dialog({
    //    content: '如果定义了回调函数才会出现相应的按钮',
    //    ok: function () {
    //        this.title('3秒后自动关闭').time(3);
    //        return false;
    //    },
    //    cancelVal: '关闭',
    //    cancel: true //为true等价于function(){}
    //});
  
    //art.dialog({
    //    id: 'testID',
    //    content: 'hello world!',
    //    button: [
    //        {
    //            name: '同意',
    //            callback: function () {
    //                this.content('你同意了').time(2);
    //                return false;
    //            },
    //            focus: true
    //        },
    //        {
    //            name: '不同意',
    //            callback: function () {
    //                alert('你不同意')
    //            }
    //        },
    //        {
    //            name: '无效按钮',
    //            disabled: true
    //        },
    //        {
    //            name: '关闭我'
    //        }
    //    ]
    //});
    //art.dialog({
    //    id: 'KDf435',
    //    title: '警告',
    //    content: '我是初始化的内容'
    //});
    //art.dialog.list['KDf435'].content('对话框内容被扩展方法改变了');
      
    //art.dialog().content("OK");
</script>
